<template>
  <div class="main-content1">
    <control-bar>
      <div class="fr" style="justify-content: space-between; width: 100%">
        <div class="fr" style="height: 35px">
          <!-- <n-input v-model:value="searchKeywords" placeholder="请输入关键字"></n-input>
          <n-button type="primary" @click="getImgList">搜索</n-button>
          &nbsp;&nbsp;&nbsp;&nbsp; -->
          <el-popover
            placement="bottom"
            title="最新瓦片信息"
            :width="400"
            trigger="hover"
          >
            <el-descriptions :column="1" border>
              <el-descriptions-item label="容量">1.5TB</el-descriptions-item>
              <el-descriptions-item label="最近更新时间">2024-09-04</el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button type="primary" size="default" @click="1">清空</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="查看范围">
                <el-button type="primary" size="default" @click="1">查看范围</el-button>
              </el-descriptions-item>
            </el-descriptions>

            <template #reference>
              <img
                src="/yxrh/zuixin.png"
                alt=""
                class="zuixindiv"
                style="width: 30px;cur"
              />
            </template>
          </el-popover>
          &nbsp;
          <el-popover
            placement="bottom"
            title="镶嵌线导出"
            :visible="xiangqianxianpopshow"
            :width="400"
          >
            <el-descriptions :column="1" border>
              <el-descriptions-item label="区域范围">
                <el-button type="primary" size="default" @click="fanweiearth"
                  >选择</el-button
                >
              </el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button type="primary" size="default" @click="1">导出</el-button>
              </el-descriptions-item>
            </el-descriptions>
            <div style="width: 100%; text-align: right; padding-top: 10px">
              <el-button
                type="primary"
                size="default"
                @click="xiangqianxianpopshow = false"
                >确定</el-button
              >
            </div>
            <template #reference>
              <duobianxing @click="xiangqianxianpopshow = true" style="cursor: pointer" />
            </template>
          </el-popover>
        </div>

        <div class="frcc">
          <n-button type="primary" @click="rongheClick">
            <template #icon>
              <!-- <i class="fa fa-upload"></i> -->
              <el-icon><Link /></el-icon>
            </template>
            融合</n-button
          >
            &nbsp;
            &nbsp;
          <n-button type="primary" @click="showAddDialog = true">
            <template #icon>
              <i class="fa fa-upload"></i>
            </template>
            导入</n-button
          >

        </div>
      </div>
    </control-bar>
    <main-content :height="60">
      <el-table :data="dataList" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column align="center" label="数据描述" property="dataSource" />
        <el-table-column align="center" label="补齐方式" property="blankFilling" />
        <el-table-column align="center" label="匀色方式" property="uniformColor" />
        <!-- <el-table-column align="center" label="层级" property="a4" /> -->
        <!-- <el-table-column align="center" label="大小" property="a5" /> -->
        <el-table-column align="center" label="镶嵌线" property="scanPath" />
        <el-table-column align="center" label="瓦片格式" property="batchFormat" />
        <el-table-column align="center" label="投影信息" property="projectionMode" />
        <el-table-column align="center" label="成像时间" property="imagingTime" />
        <el-table-column align="center" label="处理进度" property="status">
          <!-- <template #default="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="15"
              :percentage="scope.row.a11"
              :status="scope.row.a11 == 100 ? 'success' : ''"
              :striped="scope.row.a11 == 100 ? false : true"
              :striped-flow="scope.row.a11 == 100 ? false : true"
            />
          </template> -->
        </el-table-column>
        <el-table-column align="center" label="创建时间" property="createTime">
        </el-table-column>
        <!-- <el-table-column align="center" label="瓦片个数" property="status">
          <template #default="scope">
            {{ scope.row.tileList.length }}
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作" width="300">
          <template #default="scope">
            <div class="frcc" v-if="scope.row.status == '数据导入完成'">
              <el-tooltip content="查看列表" placement="top" effect="dark">
                <div style="cursor: pointer">
                  <!-- <n-icon :size="'large'" @click="showxiangqianxiandia(scope.row)">
                      <ActionIcon.Polygon />
                    </n-icon> -->
                  <el-button type="" size="small" @click="jiexiClick(scope.row)"
                    >解析</el-button
                  >
                </div>
              </el-tooltip>
            </div>
            <div class="frcc" v-else-if="scope.row.status == '数据解析完成'">
              <el-tooltip content="查看列表" placement="top" effect="dark">
                <div style="cursor: pointer">
                  <!-- <n-icon :size="'large'" @click="showxiangqianxiandia(scope.row)">
                      <ActionIcon.Polygon />
                    </n-icon> -->
                  <el-button type="" size="small" @click="showwapiantable(scope.row)"
                    >查看镶嵌线</el-button
                  >
                </div>
              </el-tooltip>
              &nbsp;
              <el-tooltip content="查看文件" placement="top" effect="dark">
                <div style="cursor: pointer">
                  <!-- <n-icon :size="'large'" @click="showfileexploer = true">
                      <ActionIcon.View style="cursor: pointer;" />
                    </n-icon> -->
                  <el-button type="" size="small" @click="chakanwenjian(scope.row)"
                    >查看文件</el-button
                  >
                </div>
              </el-tooltip>
              &nbsp;
              <el-tooltip content="查看瓦片" placement="top" effect="dark">
                <!-- content to trigger tooltip here -->
                <el-button type="" size="small" @click="showtiles(scope.row)"
                  >查看瓦片</el-button
                >
              </el-tooltip>
            </div>
            <div class="frcc" v-else>
              暂无操作
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pageNum"
        @current-change="loadData()"
        :page-size="pageSize"
        :total="totalCount"
      ></el-pagination>
    </main-content>
  </div>

  <!-- 融合dialog -->
  <el-dialog title="融合配置" v-model="ifshowRonghe" width="30%">
    <!-- 判断数据类型；需不需要地球 -->
    <div style="width: 100%;  position: relative">
      <rongheForm :rongheOptions="rongheOptions" v-if="ifshowRonghe" />
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="ifshowRonghe = false"> 取消 </el-button>
        <el-button type="primary" @click="rongheOK"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  

  <!-- 查看 -->
  <el-dialog
    title="范围选择"
    :append-to-body="true"
    v-model="showFanweiDia"
    width="60%"
    top="30px"
  >
    <!-- 判断数据类型；需不需要地球 -->
    <div style="width: 100%; height: 500px; position: relative">
      <Earth
        :showToolBox="false"
        :showEagleView="false"
        :showStatusBar="false"
        v-if="showFanweiDiaEarth"
      />
      <div style="position: absolute; top: 10px; left: 10px">
        <el-button-group v-if="true">
          <el-button type="mini" @click="1">矩形</el-button>
          <el-button type="mini" @click="1">多边形</el-button>
        </el-button-group>
      </div>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="showFanweiDia = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 查看列表  镶嵌线  -->
  <el-dialog title="查看数据" v-model="ifshowWapiantable" width="60%" top="30px">
    <!-- 判断数据类型；需不需要地球 -->
    <div style="width: 100%; height: 500px; position: relative">
      <wapiantable :itemdata="selitem" v-if="ifshowWapiantable" />
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="ifshowWapiantable = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 查看瓦片 -->
  <el-dialog title="查看数据" v-model="showxiangqianxian" width="60%" top="30px">
    <!-- 判断数据类型；需不需要地球 -->
    <div style="width: 100%; height: 500px; position: relative">
      <earthview :itemOptions="selitem" v-if="showxiangqianxian" />
      <div style="position: absolute; top: 10px; left: 10px">
        <el-button type="primary" size="default" @click="">编辑</el-button>
      </div>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="showxiangqianxian = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 查看文件结构 -->
  <el-dialog title="查看文件" v-model="showfileexploer" width="60%" top="30px">
    <!-- 判断数据类型；需不需要地球 -->
    <div style="width: 100%; height: 500px; position: relative; padding: 10px">
      <el-scrollbar style="padding: 0 10px; box-sizing: border-box; height: 500px">
        <fileexploer class="wh" style="" :fileitem="fileitem" v-if="showfileexploer" />
      </el-scrollbar>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="showfileexploer = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 查看瓦片 -->
  <el-dialog title="查看瓦片" v-model="showTile" width="60%" top="30px">
    <!-- 判断数据类型；需不需要地球 -->
    <div style="width: 100%; height: 500px; position: relative">
      <earthview :itemOptions="selitem" v-if="showTile" />
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="showTile = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增记录 -->
  <el-dialog title="导入数据" v-model="showAddDialog" width="45%" destroy-on-close>
    <wapian-upload-form
      ref="resourceUploadFormRef"
      :taskOptions="taskOptions"
      :showAddDialog="showAddDialog"
      @changeAddVisable="changeAddVisable"
    ></wapian-upload-form>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
      </div>
    </template> -->
  </el-dialog>
</template>
<script setup>
import { ref, nextTick, onMounted, reactive } from "vue";
import ControlBar from "@/components/common/ControlBar.vue";
import MainContent from "@/components/common/MainContent.vue";
import { ActionIcon } from "@/common/ActionIconList";
import WapianUploadForm from "./common/WapianUploadForm.vue";
import earthview from "./common/earthview.vue";
import fileexploer from "./common/fileExploer/index.vue";
import rongheForm from "./common/rongheForm.vue";

import { ElMessage } from "element-plus";


import Target from "@/components/common/Earth/earthsearch/target";

import duobianxing from "./icon/duobianxing.svg";
import { apiList } from "@/api/apiList";

const dialogwenjianVisible = ref(false);
const showItem = ref(false);
const showFanweiDia = ref(false);
const showFanweiDiaEarth = ref(false);
const showfile = ref(false);
const selItem = ref({});

let showTile = ref(false);

const xiangqianxianpopshow = ref(false);

let showxiangqianxian = ref(false);

let showfileexploer = ref(false);

let ifshowWapiantable = ref(false);

let ifshowRonghe = ref(false);

const selectable = (row) => (row.status == '数据解析完成')

let tselval = []

function handleSelectionChange(val) {
  tselval = val
}

function rongheClick(params) {
  
  if (tselval.length == 0) {
    ElMessage.success("请选择至少一条数据")
    return
  }
  ifshowRonghe.value = true
}

function rongheOK() {

  let resid = []

  tselval.map(item => {
    resid.push(item.batchId)
  })

  let params = {
      "uniformColor": rongheOptions.yunsefangshi,//匀色方式
      "batchId":resid,//batchId
      "blankFilling": rongheOptions.buqifangshi//补齐方式
  }

  apiList.batchTogether(params).then(ren => {
    if (
      res.code == 200
    ) {
      ElMessage.success("提交成功")
    }

  })
}

function jiexiClick(data) {
  
  apiList.getbatchAnalyse(data.batchId).then(res => {
    if (
      res.code == 200
    ) {
      ElMessage.success("提交成功")
    }
  })

}

let selitem = {};
function showtiles(item) {
  selitem = item;
  selitem.type = "showtiles";
  showTile.value = true;
}

function showwapiantable(item) {
  selitem = item;
  selitem.type = "wapiantable";
  ifshowWapiantable.value = true;
}

let fileitem = {};

function chakanwenjian(item) {
  apiList.getFileBatch(item.batchVersion).then((res) => {
    console.log(res);
    fileitem = res.data;

    showfileexploer.value = true;
  });
  // selitem.type = "wapiantable";
}

function showxiangqianxiandia(item) {
  selitem = item;
  selitem.type = "xiangqianxian";
  showxiangqianxian.value = true;
}

function fanweiearth() {
  showFanweiDia.value = true;
  showFanweiDiaEarth.value = false;
  setTimeout(() => {
    showFanweiDiaEarth.value = true;
  }, 0);
}

function changeAddVisable(type) {
  let params = {
    dataSource: "卫星一号", //数据来源
    blankFilling: "不补齐", //补齐方式
    uniformColor: "无", //匀色方式
    scanPath: "\\primary_data\\db", //扫描路径
    projectionMode: "3857", //4326:经纬度   3857:墨卡托
    batchFormat: "db", //瓦片版本
  };
  params.dataSource = taskOptions.shujulaiyuan;
  params.blankFilling = taskOptions.buqifangshi;
  params.uniformColor = taskOptions.yunsefangshi;
  params.scanPath = taskOptions.wenjian;
  params.projectionMode = taskOptions.touyingfangshi;
  params.batchFormat = taskOptions.wapiangeshi;

  apiList.wapian.postBatch(params).then((res) => {
    // 判断是否添加成功
    // 成功之后重新加载数据
    if (res.code == 200) {
      loadData();
      showAddDialog.value = type;
    }
  });
}

let pageSize = ref(10);
let totalCount = ref(0);
let pageNum = ref(1);

loadData();

function loadData() {
  apiList.wapian.getBatchList(pageSize.value, pageNum.value).then((res) => {
    // 判断是否添加成功
    // 成功之后重新加载数据
    console.log(res);
    dataList.value = res.rows;
    totalCount.value = res.total;
  });
}

let taskOptions = reactive({
  shujulaiyuan: "",
  wapiangeshi: "db",
  buqifangshi: "",
  touyingfangshi: "3857",
  shijian: "",
  yunsefangshi: "",
  miaoshu: "",
  wenjian: "",
});

let rongheOptions = reactive({
  buqifangshi: "不补齐",
  yunsefangshi: "全球色彩模板影像库匀光匀色",
});

onMounted(() => {
  apiList.wapian.getFileScan().then((res) => {
    fileData.value = res.data;
  });
});

const showSourceItem = function (data) {
  data.type = "shp";
  selItem.value = data;
  nextTick(() => {
    showItem.value = true;
  });
};
const earthReady = function () {
  const target = new Target();
  target.load(selItem.value);
};

let dataList = ref([
  {
    a1: "1",
    a2: "卫星一号",
    a3: "-",
    a4: "-",
    a5: "-",
    a6: "-",
    a7: "db(png)",
    a8: "1.915847555",
    a9: "EPSG 4326",
    a10: "-",
    a11: 70,
  },
  {
    a1: "2",
    a2: "卫星2号",
    a3: "[-180 90,180 -90]",
    a4: "0-10",
    a5: "7815M",
    a6: "C:\\Users\\gz1",
    a7: "db(jpg)",
    a8: "1.8548",
    a9: "EPSG 3857",
    a10: "2024-07-05",
    a11: 100,
  },
]);

let title = ref("查看");
let showAddDialog = ref(false);

function nodeClick(data) {
  console.log(data);
  // treeData.value = data;
}

const props = {
  label: "name",
  children: "children",
};

let fileData = ref([]);

const data = [
  {
    id: 1,
    label: "0826上传测试",
    children: [
      {
        id: 4,
        label: "测试上传",
        children: [
          {
            id: 9,
            label: "多光谱影像",
          },
          {
            id: 10,
            label: "全色影像",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "2024416",
    children: [
      {
        id: 5,
        label: "2024-01",
      },
      {
        id: 6,
        label: "2024-02",
      },
    ],
  },
  {
    id: 3,
    label: "conf",
    children: [
      {
        id: 7,
        label: "main-01",
      },
      {
        id: 8,
        label: "main-02",
      },
    ],
  },
];

const pagination = ref({
  total: 10,
  size: 10,
});
function handShowModel() {
  dialogVisible.value = true;
}
function getImgList() {}
function handleClose() {
  dialogVisible.value = false;
}
</script>
<style lang="scss">
.el-checkbox.is-disabled {
  // background-color: #fff!important;
  .el-checkbox__inner{
    background-color: #9999!important;

  }
}
.zuixindiv {
  cursor: pointer;
}
</style>
